---
section: Flexbox
title: Order
slug: /docs/order/
---

# Order

Utilities for controlling the order of flex items.

<carbon-ad />

| React props     | CSS Properties    |
| --------------- | ----------------- |
| `order={value}` | `order: {value};` |

## Usage

Use `order={value}` to render flex items in a different order than they appear in the DOM.

```jsx preview color=light-blue
<>
  <template preview>
    <x.div display="flex" justifyContent="space-between" spaceX={4}>
      <x.div
        w={16}
        h={16}
        order={3}
        borderRadius="md"
        bg="light-blue-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        w={16}
        h={16}
        borderRadius="md"
        bg="light-blue-300"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        w={16}
        h={16}
        borderRadius="md"
        bg="light-blue-300"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" justifyContent="space-between">
    <x.div order={3}>1</x.div>
    <div>2</div>
    <div>3</div>
  </x.div>
</>
```

## Responsive

To apply a order utility only at a specific breakpoint, use responsive object notation. For example, adding the property `order={{ md: 10 }}` to an element would apply the `order={10}` utility at medium screen sizes and above.

```jsx
<x.div order={{ md: 10 }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
